<template>
  <div p-5>
    <DynamicTable
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="id"
      @resize-column="handleResizeColumn"
      :scroll="{
        y: 'calc(100vh - 360px)',
      }"
      :row-selection="rowSelection"
    >
      <template #toolbar>
        <a-button type="primary" @click="openUserModal({})"> 耗材申请 </a-button>
        <a-button type="primary" @click="openUserModal({})"> 添加退还 </a-button>
      </template>
    </DynamicTable>
  </div>
</template>
<script setup lang="ts">
  import { baseColumns, type TableListItem } from './columns';
  import { ref, reactive } from 'vue';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';
  const [DynamicTable] = useTable();
  const selectedFileList = ref<API.File[]>([]);
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 170,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          ifShow: record.type == 1,

          label: '编辑',
          onClick: () => console.log('111'),
        },
        {
          label: '详情',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'DA123456666',
          userLogin: 'WXGD1234565',
          type: '1',
          type2: '1',
          userName: '2',
          action: '123',
          operationTime: '张丹',
          operationName: '2012-01-01 11:11:11',
        },
        {
          id: '2',
          userNum: 'DA123456666',
          userLogin: 'WXGD1234565',
          type: '2',
          type2: '1',
          userName: '3',
          action: '123',
          operationTime: '张丹',
          operationName: '2012-01-01 11:11:11',
        },
        {
          id: '3',
          userNum: 'DA123456666',
          userLogin: 'WXGD1234565',
          type: '3',
          type2: '2',
          userName: '3',
          action: '123',
          operationTime: '张丹',
          operationName: '2012-01-01 11:11:11',
        },
      ],
      searchCount: true,
      size: 10,
      total: 3,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  /**
   * @description 打开用户弹窗
   */
  const openUserModal = async (record: Partial<TableListItem> = {}) => {};
  const handleResizeColumn = (w, col) => {
    col.width = w;
  };
  const rowSelection = reactive<TableRowSelection<API.NetdiskManageListItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys: Key[], selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectedFileList.value = selectedRows.map((n) => ({ type: n.type, name: n.name }));
    },
  });
</script>
<style scoped lang="less"></style>
